<template>
  <md-popup v-model="show" position="bottom">
    <md-popup-title-bar only-close :title="$t('box.pay')" :describe="$t('box.describe')" title-align="left" @cancel="show = false" />
    <div style="background: #fff; padding: 20px">
      <md-input-item type="digit" v-model="num" align="center" is-highlight>
        <template #right>=&nbsp;<md-amount :value="Number(num * 50)" :precision="0" transition></md-amount>&nbsp;USDT</template>
      </md-input-item>
      <div style="padding-top: 20px">
        <md-button type="primary" @click="action" round>{{ $t('confirm') }}</md-button>
      </div>
    </div>
  </md-popup>
</template>

<script setup>
import { ref, defineExpose, defineEmits } from 'vue'
import { asset } from '@/api/box'
import { toast } from '@/style'
import { t } from '@/lang'

const emit= defineEmits(['confirm'])
const show = ref(false)
const num = ref(1)

const open = (data) => {
  show.value = true
}

const action = () => {
  if(num.value > 0) {
    emit('confirm', num.value)
    show.value = false
  }
}

defineExpose({ open })

</script>